<template>
  <div class="card content-box">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="140px">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item :label="t('micro.product.name')" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.business_hours')" prop="business_hours">
            <el-time-select
              v-model="ruleForm.business_hours.start"
              :max-time="ruleForm.business_hours.end"
              start="00:00"
              end="23:59"
              class="mr-4"
              :placeholder="t('micro.product.start_time')"
            />
            &nbsp;&nbsp;--&nbsp;&nbsp;
            <el-time-select
              v-model="ruleForm.business_hours.end"
              :min-time="ruleForm.business_hours.start"
              class="mr-4"
              start="00:00"
              end="23:59"
              :placeholder="t('micro.product.end_time')"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.business_day')" prop="business_day">
            <el-checkbox-group v-model="ruleForm.business_day">
              <el-checkbox label="1">周一</el-checkbox>
              <el-checkbox label="2">周二</el-checkbox>
              <el-checkbox label="3">周三</el-checkbox>
              <el-checkbox label="4">周四</el-checkbox>
              <el-checkbox label="5">周五</el-checkbox>
              <el-checkbox label="6">周六</el-checkbox>
              <el-checkbox label="0">周日</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.action')" prop="action">
            <el-radio-group v-model="ruleForm.action">
              <el-radio border label="aShare">{{ $t("micro.product.aShare") }}</el-radio>
              <el-radio border label="inside">{{ $t("micro.product.inside") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.market')" prop="market">
            <el-input v-model="ruleForm.market" :placeholder="marketPlaceholder" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.reduce')" prop="reduce">
            <el-input v-model="ruleForm.reduce" type="number" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.enlarge')" prop="enlarge">
            <el-input v-model="ruleForm.enlarge" type="number" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.digit')" prop="digit">
            <el-input v-model="ruleForm.digit" type="number" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.is_vacation')" prop="is_vacation">
            <el-radio-group v-model="ruleForm.is_vacation">
              <el-radio border :label="0">{{ $t("common.no") }}</el-radio>
              <el-radio border :label="1">{{ $t("common.yes") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.used')" prop="rand">
            <el-radio-group v-model="ruleForm.rand.used">
              <el-radio border :label="0">{{ $t("common.no") }}</el-radio>
              <el-radio border :label="1">{{ $t("common.yes") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-show="ruleForm.rand.used">
        <el-col :span="24">
          <el-form-item :label="t('micro.product.min')">
            <el-input v-model="ruleForm.rand.rand.min" type="number" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="t('micro.product.max')">
            <el-input v-model="ruleForm.rand.rand.max" type="number" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.reduce')">
            <el-input v-model="ruleForm.rand.zoom.reduce" type="number" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.enlarge')">
            <el-input v-model="ruleForm.rand.zoom.enlarge" type="number" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.minus')">
            <el-radio-group v-model="ruleForm.rand.minus.used">
              <el-radio border :label="0">{{ $t("common.no") }}</el-radio>
              <el-radio border :label="1">{{ $t("common.yes") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item :label="t('micro.product.odds')">
            <el-input v-model="ruleForm.rand.minus.odds" type="number" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="dynamicForm">
import { reactive, ref, onBeforeMount, watch } from "vue";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { productCreate, productUpdate, productDetail } from "@/api/modules/micro";
import { useTabsStore } from "@/stores/modules/tabs";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
const route = useRoute();
const { t } = useI18n();

const ruleForm = reactive({
  id: route.params.id,
  name: "",
  business_hours: {
    start: "00:00",
    end: "23:59"
  },
  business_day: ["1", "2", "3", "4", "5"],
  action: "aShare",
  rand: {
    used: 0,
    rand: { min: 1, max: 10 },
    zoom: { reduce: 0, enlarge: 0 },
    minus: {
      used: 1,
      odds: 50,
      str: ""
    }
  },
  market: "",
  reduce: 0,
  enlarge: 0,
  is_vacation: 0,
  digit: 2
});

const tabStore = useTabsStore();
const keepAliveStore = useKeepAliveStore();

const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  name: [{ required: true, message: t("micro.product.rule.name"), trigger: "blur" }],
  business_hours: [{ required: true, message: t("micro.product.rule.business_hours"), trigger: "blur" }],
  business_day: [{ required: true, message: t("micro.product.rule.business_day"), trigger: "blur" }],
  action: [{ required: true, message: t("micro.product.rule.action"), trigger: "blur" }]
});

const submitForm = async (formEl: FormInstance | undefined) => {
  console.log(ruleForm);

  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      const action = ruleForm.id > 0 ? productUpdate : productCreate;
      action(ruleForm).then(response => {
        ElMessage.success(response.message);
        setTimeout(() => {
          if (route.meta.isAffix) return;
          tabStore.removeTabs(route.fullPath);
          keepAliveStore.removeKeepAliveName(route.name as string);
        }, 200);
      });
    } else {
      ElMessage.error("请根据提示输入信息！");
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const toDetail = id => {
  productDetail({ id }).then(response => {
    ruleForm.id = response.data.id;
    ruleForm.action = response.data.action;
    ruleForm.digit = response.data.digit;
    ruleForm.enlarge = response.data.enlarge;
    ruleForm.is_vacation = response.data.is_vacation;
    ruleForm.market = response.data.market;
    ruleForm.name = response.data.name;
    ruleForm.reduce = response.data.reduce;
    ruleForm.business_day = JSON.parse(response.data.business_day);
    ruleForm.business_hours = JSON.parse(response.data.business_hours);
    ruleForm.rand = JSON.parse(response.data.rand);
  });
};

onBeforeMount(() => {
  if (route.params.id) toDetail(route.params.id);
});

const marketPlaceholder = ref("请输入A股票代码!");
watch(
  () => ruleForm.action,
  newValue => {
    switch (newValue) {
      case "aShare":
        marketPlaceholder.value = "请输入A股票代码!";
        break;
      case "inside":
        marketPlaceholder.value = "请输入产品ID； 如自身则输入起始数据，必须有小数点！";
        break;
    }
  }
);
</script>

<style scoped lang="scss">
@import "./edit.scss";
</style>
